//当前轮播到的下标
let nowBannerIdx = 1;
//轮播图总数
let totalBannerNum = 0;
//轮播图计时器
let timerBanner;
//是否完成当前这次轮播
let bannerFlag = true;
//每个多少毫秒轮播一次
let bannerTime = 3000;

//默认向左轮播
function toLeft(){
  if ( nowBannerIdx >= (totalBannerNum + 1) )
    nowBannerIdx = 1;

  $(".lop-common-banner-spread").animate({
    left: (nowBannerIdx * -100 + -100) + '%'
  },600,function(){
    if ( nowBannerIdx === (totalBannerNum + 1) ){
      nowBannerIdx = 1;
      $(this).css({'left':'-100%'});
    }
    bannerFlag = true;
  });
  let nowIdx = ( nowBannerIdx === totalBannerNum ? 1 : nowBannerIdx + 1 );
  $('.lop-common-banner>.lop-common-banner-btn-box>.lop-common-banner-btn:nth-child(' + nowIdx + ')').addClass('lop-common-banner-btn-sel')
    .siblings('.lop-common-banner-btn').removeClass('lop-common-banner-btn-sel');

  nowBannerIdx++;
}

//默认向右轮播
function toRight(){
  nowBannerIdx--;
  if ( nowBannerIdx <= 0 )
    nowBannerIdx = totalBannerNum;

  $(".lop-common-banner-spread").animate({
    left: ( nowBannerIdx === totalBannerNum ? 0 : nowBannerIdx * -100 ) + '%'
  },600,function(){
    if ( nowBannerIdx === totalBannerNum )
      $(this).css({'left': (nowBannerIdx * -100) + '%'});
    bannerFlag = true;
  });
  let nowIdx = ( nowBannerIdx === 0 ? totalBannerNum : nowBannerIdx );
  $('.lop-common-banner>.lop-common-banner-btn-box>.lop-common-banner-btn:nth-child(' + nowIdx + ')').addClass('lop-common-banner-btn-sel')
    .siblings('.lop-common-banner-btn').removeClass('lop-common-banner-btn-sel');
}

//初始化轮播图
function initBanner(){
  totalBannerNum = $('.lop-common-banner-spread>.lop-common-banner-box').length;

  let obj = $('.lop-common-banner-spread');
  let $firstC = $(obj).children('.lop-common-banner-box:first-child');
  let $lastC = $(obj).children('.lop-common-banner-box:last-child');
  $(obj).html('<div class="lop-common-banner-box">' + $lastC[0].innerHTML + '</div>' + $(obj).html() +  '<div class="lop-common-banner-box">' + $firstC[0].innerHTML + '</div>');
  
  let timer = $(obj).attr('lop-time');
  if ( timer !== undefined && timer !== '' )
    bannerTime = timer;
  timerBanner = setInterval( 'toLeft()', parseInt(bannerTime) );

  let isHaveLR = $(obj).attr('lop-add-lrBtn') !== undefined;
  let isHaveSel = $(obj).attr('lop-add-selBtn') !== undefined;

  if ( isHaveLR )
    $('.lop-common-banner').prepend('<div class="lop-common-banner-switch lop-common-banner-switch-left"><i class="iconfont icon-lop-left"></i></div>\n' +
      '  <div class="lop-common-banner-switch lop-common-banner-switch-right"><i class="iconfont icon-lop-right"></i></div>');

  if ( isHaveSel ){
    let selHtml = '<div class="lop-common-banner-btn-box">';
    $('.lop-common-banner-spread>.lop-common-banner-box').each( (i, v) => {
      if ( i === 0 )
        selHtml += '<div onclick="bannerBtnClick(this, ' + (i + 1) + ')" class="lop-common-banner-btn lop-common-banner-btn-sel"></div>'
      else if ( 0 < i && i < totalBannerNum )
        selHtml += '<div onclick="bannerBtnClick(this, ' + (i + 1) + ')" class="lop-common-banner-btn"></div>'
    });
    selHtml += '</div>';
    $('.lop-common-banner').append(selHtml);
  }
  
}

//轮播图底部按钮点击
function bannerBtnClick(obj, idx){
  let num = 0;
  //判断用户点击的按钮是否是当前已经轮播到的
  if ( nowBannerIdx === idx )
    return false;
  else if ( idx < nowBannerIdx ){
    num = nowBannerIdx - idx;
    //判断用户点击的下标与当前轮播到的下标。相差几个位置，若刚好是第一个与最后一个，则执行一次left就行
    if ( num === totalBannerNum - 1 )
      toLeft();
    else{ //否则，先判断 相距的距离是否大于两个位置，若大于两个位置，则直接获取到要跳转位置的坐标，再执行 right，否则就想right执行一次
      if ( num >= 2 )
        nowBannerIdx -= num - 1;
      toRight();
    }
  }
  else if ( idx > nowBannerIdx ) {
    num = idx - nowBannerIdx;
    if ( num === totalBannerNum - 1 )
      toRight();
    else{
      if ( num >= 2 )
        nowBannerIdx += num - 1;
      toLeft();
    }
  }
}

$(function(){

  //初始化轮播图
  initBanner();

  //鼠标悬浮于离开
  $('.lop-common-banner').mouseover(function(){
    clearInterval(timerBanner);
  }).mouseleave(function(){
    timerBanner = setInterval( 'toLeft()', parseInt(bannerTime) );
  });
  //用户点击右边的轮播按钮
  $('.lop-common-banner-switch-right').click(function (){
    if ( bannerFlag ){
      bannerFlag = false;
      toLeft();
    }
  });
  //用户点击左边的轮播按钮
  $('.lop-common-banner-switch-left').click(function (){
    if ( bannerFlag ){
      bannerFlag = false;
      toRight();
    }
  });

});
